Vue のコンポーネントで emit する代わりに props に関数を渡す

props に関数

親

code:vue

<script setup lang="ts">

import { ref } from "vue";

const { foo, bar = 42, baz = () => "デフォルト" } = defineProps<{

foo: string;

bar?: number;

baz?: () => string;

}>();

const result = ref<string | null>(null);

</script>

<template>

<h4>子</h4>

<p>foo: {{ foo }}</p>

<p>bar: {{ bar }}</p>

<slot />

<button @click="result = baz()" type="button">

baz() を実行

</button>

<p v-if="result">

<strong>実行結果:</strong> {{ result }}

</p>

</div>

</template>